<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    {% include "/include/headinclude.html" %}
</head>
<body style="padding-top: 70px; ">
   {% include "/include/headnav.html" %}
   <!--主框架开始 -->
   <div class="container">
       <!--行式布局 -->
      <div class="row">
             <!--左边栏开始 -->
        <div class="col-xs-4 col-md-3 bg-info">
            {% include "/include/leftnav.html" %}
        </div>
             <!--左边栏结束 -->
          <!--主界面开始 -->
        <div class="col-xs-8 col-md-9">
            <h1 class="page-header">主机组管理</h1>
            <div class="panel  panel-primary">
              <!-- Default panel contents -->
              <div class="panel-heading">
                  <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
                  主机组管理
              </div>
              <!-- Table -->
              <table class="table">
                  <tr align="center">
                        <th>序号</th><th>主机组名</th><th>操作</th>
                  </tr>
                  {% for item in data %}
                  <tr>
                      <td>{{ loop.index }}</td><td>{{item}}</td><td>
                      <button type="button" class="btn btn-primary"  data-toggle="modal"  data-target="#myModal"
                              data-type="0" data-templatename="{{ item }}"
                              >
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                             添加主机</button>
                      <button  class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal"
                              data-type="1" data-templatename="{{ item }}"
                              >
                          <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span>添加服务
                      </button>
                  </td>
                  </tr>
                  {% endfor %}
              </table>
            </div>

            <!-- 模态对话框开始 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                  </div>
                  <div class="modal-body">
                      <div class="row">
                          <div class="col-md-5 form-group">
                              <select multiple class="form-control" id="leftselect">
                                      {% for item in hostlist %}
                                          <option name="{{ item.ip }}" value="{{item.ip}}">{{item.ip}}</option>
                                      {% endfor %}
                              </select>
                          </div>
                          <divdd class="col-md-1"><br/>》<br />》</divdd>
                          <div class="col-md-5 form-group">
                              <select multiple class="form-control" id="sel-hostinput">
                              </select>
                          </div>
                      </div>
                      <div class="row">
                            <div class="col-md-12 form-group">
                                <label for="exampleInputHost">手工添加</label>
                                <input type="text" class="form-control" id="exampleInputHost" placeholder="">
                                <input type="hidden" class="form-control" id="templatename">
                                <input type="hidden" class="form-control" id="templatetype">
                            </div>
                      </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="btn-addHost">添加</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 模态对话框结束 -->

            <h3 class="page-header">添加主机组</h3>
            <div class="panel  panel-primary">
              <!-- Default panel contents -->
              <!-- Table -->
                <div class="panel-body">
                <form>
                      <div class="form-group">
                        <label for="inputTemplate"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
                            主机组名</label>
                        <input type="text" class="form-control" id="inputTemplate" placeholder="主机组名" />
                      </div>
                      <div class="form-group">
                        <label for="inputInfo"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
                            主机组描述</label>
                        <input type="text" id="inputInfo"  class="form-control" />
                      </div>
                    <div class="form-group">
                        <label for="inputEnglish"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
                            主机组英文名称</label>
                        <input type="text" id="inputEnglish"  class="form-control" />
                      </div>
                      <button type="button" class="btn btn-default" id="addTemplate">提交</button>
                      <button type="button" class="btn btn-primary" id="flushtodb">写入数据库</button>
                    </form>
                    </div>
                </div>
                <!--整体浏览界面 -->
            <!--整体浏览界面 -->

        </div>
          <!--主内容布局结束 -->
      </div>
       <!--行式布局结束 -->
   </div>

    <!-- Modal -->
   <!--主框架结束 -->
{% include "/include/buttom.html" %}
<script type="text/javascript" src="/static/res/js/templateManager.js"></script>
</body>
</html>